<template>
  <view class="list flex-column">
    <view class="top flex-row">
      <u-avatar :src="item.lawyerPic" size="68"></u-avatar>
      <view class="flex-column right">
        <view class="flex-row title-container">
          <text class="title">{{ item.consultingName }}</text>
          <text class="status" v-if="item.way==='2'">{{ item.state }}</text>
          <text class="status" v-if="item.way==='1'">线下支付</text>
          <text class="status" v-if="item.way==='0'">垫资支付</text>
        </view>
        <text class="time">下单时间：{{ item.createTime }}</text>
        <view class="flex-row flex-row-end">
          <text>合计:</text>
          <text class="price">{{ item.priceShow }}</text>
        </view>
      </view>
    </view>

    <view class="middle">
      <u-tag :text="item.tips" type="error" shape="circle" size="mini" bgColor="#e43d00"></u-tag>
    </view>
    <u-line></u-line>
    <view class="flex-row bottom">
      <text class="orderId" @click="paste(item.num)">订单号：{{ item.numShow }}</text>
      <view class="btn-container flex-row">
        <button type="default" size="mini" class="btn btn-left" v-if="item.state==='未支付'" @click="pay(item)">
          {{ item.way == '1' ? '待审核':'付款' }}
        </button>
        <button type="default" size="mini" class="btn btn-left" v-else-if="item.state==='已支付'" @click="toAddInformation(item)">补充资料</button>
        <button type="default" size="mini" class="btn btn-right" open-type="contact"
                v-if="item.state==='未支付'">联系客服
        </button>
        <button type="default" size="mini" class="btn btn-right"
                v-else @click="contactLawyer(item)">联系律师
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {isEmptyString, toast} from "@/utils/common";
import consultAndServiceConst from "@/static/const/consultAndServiceConst";
import orderManagement from "@/static/const/orderManagement";

export default {
  name: "orderItem",
  props: {
    // 订单信息
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  methods: {
    //联系律师
    contactLawyer(item) {
      if (isEmptyString(item.lawyerPhone)) {
        this.$u.toast("律师暂未设置手机号");
        return;
      }
      // #ifdef MP-WEIXIN
      uni.makePhoneCall({
        phoneNumber: item.lawyerPhone
      });
      // #endif
    },
    //复制订单号
    paste(num) {
      // #ifndef H5
      uni.setClipboardData({
        data: num,
        success: function () {
          uni.showToast({
            title: '订单号复制成功'
          });
        }
      });
      // #endif
    },
    //付款
    pay(item) {
      if (item.way == '1') {
        this.$u.toast("请等待审核");
        return;
      }
      const that=this;
      this.$store
          .dispatch("PayOrder", item.id	)
          .then((res) => {
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: res.data.timeStamp,
              nonceStr: res.data.nonceStr,
              package: res.data.package,
              signType: res.data.signType,
              paySign: res.data.paySign,
              success: function (res) {
                console.log("success:" + JSON.stringify(res));
                toast("支付成功");
                that.getList();
              },
              fail: function (err) {
                toast("支付失败");
                that.getList();
              },
            });
          });
    },
    //去补充资料
    toAddInformation(item){
      uni.navigateTo({
        url: '/pages/order/addInformation?id='+item.id
      });
    }

  }
}
</script>

<style scoped lang="scss">
.list {
  padding: 1rem;
  background-color: #FFFFFF;
  margin-top: 0.1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;

  .top {
    .right {
      width: 100%;
      padding-left: 0.8rem;
      min-height: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title-container {

        justify-content: space-between;

        .title {
          font-size: 0.8rem;
          color: black;
        }

        .status {
          font-size: 0.8rem;
          color: gray;
          margin-left: 0.5rem;
        }
      }

      .time {
        font-size: 0.6rem;
        color: #999999;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

      .flex-row-end {
        justify-content: flex-end;
        align-items: center;

        text {
          font-size: 0.6rem;
          color: gray;
        }

        .price {
          font-size: 1rem;
          color: #e43d00;
          margin-left: 0.5rem;
        }
      }

    }
  }

  .middle {
    width: fit-content;
    padding-bottom: 0.5rem;
  }

  .bottom {
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;

    .orderId {
      font-size: 0.7rem;
      color: #999999;
    }

    .btn-container {
      .btn {
        background-color: rgba(0, 0, 0, 0);
        width: 4rem;
        line-height: normal;
        padding: 0px;
        padding: 5px 0;
        font-size: 0.5rem;
      }

      .btn-left {
        box-sizing: border-box;
        border: 1px solid #e43d00;
        color: #e43d00;
      }

      .btn-right {
        box-sizing: border-box;
        border: 1px solid #999999;
        color: #999999;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>